<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学校信息列表(vue)</title>
    <style>

        h1 {
            text-align: center;
            font-family: "楷体", "KaiTi", "SimKai", "STKaiti",sans-serif;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-family: "仿宋", "SimSun", sans-serif;
            table-layout: auto; /* 让表格根据内容自动调整宽度 */;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>

<body>
<h1>学校信息列表</h1>
<table id="app">
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>联系方式</th>
        <th>全称</th>
        <th>建校日期</th>
        <th>更新时间</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="school in schoolList" :key="school.id">
        <td>{{ school.id }}</td>
        <td>{{ school.name }}</td>
        <td>{{ school.contact }}</td>
        <td>{{ school.fullName }}</td>
        <td>{{ school.foundingDate }}</td>
        <td>{{school.updateTime }}</td>
    </tr>
    </tbody>
</table>

<!-- 引入 axios -->
<script src="js/axios.min.js"></script>
<script type="module">
    import { createApp } from './js/vue.esm-browser.js';

    createApp({
        data() {
            return {
                schoolList: []
            };
        },
        methods: {
            async getSchool() {
                try {
                    const result = await axios.get('/getSchools');
                    this.schoolList = result.data;
                } catch (error) {
                    console.error('获取学校信息失败:', error);
                    alert('获取学校信息失败，请稍后重试。');
                }
            }
        },
        mounted() {
            this.getSchool();
        }
    }).mount('#app');
</script>
</body>

</html>